<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags" %>
<%@ page isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>山西煤炭现货公路交易系统客户端</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.5 -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/bootstrap/css/bootstrap.min.css">
<!-- 日期范围-->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/plugins/daterangepicker/daterangepicker-bs3.1.css">
<script src="<s:url value="/resources"/>/adminlte/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="<s:url value="/resources"/>/adminlte/bootstrap/js/bootstrap.min.js"></script>
<script src="<s:url value="/resources"/>/adminlte/plugins/daterangepicker/moment2.9.0.js"></script>
<script src="<s:url value="/resources"/>/adminlte/plugins/daterangepicker/daterangepicker1.3.6.js"></script>
<!-- 日期范围-->	
<!-- Ionicons -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/ionicons/css/ionicons.min.css">
<!-- jvectormap -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<!-- Theme style -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/dist/css/skins/_all-skins.min.css">
<!-- DataTables -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/plugins/datatables/dataTables.bootstrap.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
     folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/dist/css/skins/_all-skins.min.css">
<!-- 2016.8.19查询加样式 -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/css/custom.css">

<!-- AdminLTE App -->
<script src="<s:url value="/resources"/>/adminlte/dist/js/app.min.js"></script>
<!-- Select2 -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/plugins/select2/select2.css">
<!-- Theme style -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/dist/css/AdminLTE.min.css">
<!-- DataTables -->
<script src="<s:url value="/resources"/>/adminlte/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="<s:url value="/resources"/>/adminlte/plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- Select2 -->
<script src="<s:url value="/resources"/>/adminlte/plugins/select2/select2.full.min.js"></script>
<script src="<s:url value="/resources"/>/adminlte/plugins/select2/i18n/zh-CN.js"></script>
<script src="<s:url value="/resources"/>/echarts/echarts.min.js"></script>
<script src="<s:url value="/resources"/>/adminlte/default.js"></script>
<script src="<s:url value="/resources"/>/echarts/myechart/addmonthsummaryChart.js"></script>
<script src="<s:url value="/resources"/>/adminlte/default_logistical.js"></script>
<script src="<s:url value="/resources"/>/echarts/myechart/areaChart.js"></script>
<script src="<s:url value="/resources"/>/adminlte/My97DatePicker/WdatePicker.js"></script>

<script type="text/javascript">
$(function(){
	 loadMenu("${user.roleType}","${menuid}",${menuList});
	 barAndLine("interactive",${xAxis},${xuqcs},${xuqds},${shoulcs},${shoulds},${wanccs},${wancds});
	 areaChartHuan(${pielistDaoddqMonth},"","","areaChart","完成车数");//分省市到达地区完成车数
	 areaChart1(${pielistShipArea},"","","areaChart1");//分市发送地区完成车数
	 lineChart(${linelistDaoG},"","",${linelistDaoG},${lineXDaoG},"1","lineChart1");//煤炭到港完成车数  下水
	 lineChart(${linelistDaoj},"","",${linelistDaoj},${lineXLuj},"1","lineChart2");//煤炭到各路局完成车数
	 lineChart(${linelistDaoddq},"","",${linelistDaoddq},${lineXDaoddq},"1","lineChart3");//煤炭到达地区完成车数
	 barAndLineDefine("lineChart0","",${xyData},"全部","40%",${data});
});
function clickSum(type){
	document.getElementById("type").value=type;
	
	if(document.getElementById("startDate").value!=""){
		document.getElementById("form").submit();
	}else{
		return false;
	}
}
function submitDate(){
	if(document.getElementById("startDate").value!=""){
		document.getElementById("form").submit();
	}else{
		return false;
	}
}
function active(type){
	if(type=="dl"){
		barAndLineDefineSinger("lineChart0","",${xyData},"全部","电力","40%",${data},${datadl});
	}else if(type=="ck"){
		barAndLineDefineSinger("lineChart0","",${xyData},"全部","出口","40%",${data},${datack});
	}else if(type=="jsk"){
		barAndLineDefineSinger("lineChart0","",${xyData},"全部","交收库","40%",${data},${datajsk});
	}else if(type=="jk"){
		barAndLineDefineSinger("lineChart0","",${xyData},"全部","进口","40%",${data},${datajk});
	}else if(type=="qt"){
		barAndLineDefineSinger("lineChart0","",${xyData},"全部","其他","40%",${data},${dataqt});
	}else if(type=="ss"){
		barAndLineDefineSinger("lineChart0","",${xyData},"全部","省市","40%",${data},${datass});
	}else if(type=="hg"){
		barAndLineDefineSinger("lineChart0","",${xyData},"全部","化工","40%",${data},${datahg});
	}else if(type=="yj"){
		barAndLineDefineSinger("lineChart0","",${xyData},"全部","冶金","40%",${data},${datayj});
	}else if(type=="all"){
		barAndLineDefine("lineChart0","",${xyData},"全部","40%",${data});
	}
}
</script>
</head>
<body class="skin-blue sidebar-mini">
<input type="hidden" id="activeValue" name="activeValue"/>
<div class="wrapper">
<%@ include file="../../header.jsp" %>
<%@ include file="../../sidebar.jsp" %>
<div class="content-wrapper">
<form id="form" action="<s:url value="/"/>/logistical/monthSurvey" method="post">
<input type="hidden" value='${type}' name="type" id ="type"/>
        <div class="content-header">
          <h1>物流分析<small>物流月发运概况</small></h1>
          <ol class="breadcrumb">
            <li><a href="<s:url value="/"/>/index.jsp"><i class="fa fa-dashboard"></i>首页</a></li>
            <li><a href="#" id="location1"></a></li>
          <li class="active" id="location2"></li>
          </ol>
        </div>
         <!-- 8.23 物流查询新页面 开始 -->
        <!-- Main content-->
        <div class="content">
          <div class="box  box-default">
              <div class="box-body">
                <div class="wuliu_search_head">
                <label style="padding-left: 15px;">日期：</label><input type="text" onchange="submitDate();" style="width:100px;padding-left: 17px;height: 32px;border: 1px solid #d2d6de;"  class="" id="startDate" name="startDate" value="${startDate}"  onfocus="WdatePicker({dateFmt:'yyyy-MM'})">
                <c:choose>
	                <c:when test="${type eq '山西省'}">
		                <button class="btn btn-primary" style="background-color: #f0ad4e" type="button" onclick="clickSum('山西省');">山西省</button>
		                <button class="btn btn-primary"  type="button" onclick="clickSum('太原局');">太原局</button>
		                <button class="btn btn-primary"  type="button" onclick="clickSum('北京局');">北京局</button>
		                <button class="btn btn-primary"  type="button" onclick="clickSum('郑州局');">郑州局</button>
	                </c:when>
	                <c:when test="${type eq '太原局'}">
		                <button class="btn btn-primary" type="button" onclick="clickSum('山西省');">山西省</button>
		                <button class="btn btn-primary" style="background-color: #f0ad4e"  type="button" onclick="clickSum('太原局');">太原局</button>
		                <button class="btn btn-primary"  type="button" onclick="clickSum('北京局');">北京局</button>
		                <button class="btn btn-primary"  type="button" onclick="clickSum('郑州局');">郑州局</button>
	                </c:when>
	                <c:when test="${type eq '北京局'}">
		                <button class="btn btn-primary" type="button" onclick="clickSum('山西省');">山西省</button>
		                <button class="btn btn-primary"  type="button" onclick="clickSum('太原局');">太原局</button>
		                <button class="btn btn-primary" style="background-color: #f0ad4e"  type="button" onclick="clickSum('北京局');">北京局</button>
		                <button class="btn btn-primary"  type="button" onclick="clickSum('郑州局');">郑州局</button>
	                </c:when>
	                <c:when test="${type eq '郑州局'}">
		                <button class="btn btn-primary" type="button" onclick="clickSum('山西省');">山西省</button>
		                <button class="btn btn-primary"  type="button" onclick="clickSum('太原局');">太原局</button>
		                <button class="btn btn-primary"  type="button" onclick="clickSum('北京局');">北京局</button>
		                <button class="btn btn-primary" style="background-color: #f0ad4e"  type="button" onclick="clickSum('郑州局');">郑州局</button>
	                </c:when>
                </c:choose>
                
                </div>
            </div>
          </div>
          <!-- /.box -->
          <div class="row">
            <div class="col-md-6">
	            <div class="nav-tabs-custom">
	                <ul class="nav nav-tabs pull-right">
	                  <li class="pull-left header"><i class="fa fa-inbox"></i>${type}分市到达地区完成车数</li>
	                </ul>
	                <div class="tab-content no-padding">
		                  <div class="chart tab-pane active" id="chart1" style="position: relative; height: 350px;">
					           <div class="box-body">
					             <div class="chart" style="float: left;width:100%">
					               <div id="areaChart" style="height:300px;"></div>
					             </div>
					          </div>
		                  </div>
                	</div>
	            </div>
            </div><!-- /.col (LEFT) -->
            <div class="col-md-6">
            	<div class="nav-tabs-custom">
	                <ul class="nav nav-tabs pull-right">
	                <c:forEach items="${listHangyTitle}" var="lii">
		                <li><a href="#chart${lii.num}" data-toggle="tab" onclick="active('${lii.type}')">${lii.hangy1}</a></li>
	                </c:forEach>
	                <li class="active"><a href="#chart2" data-toggle="tab" onclick="active('all')">全部</a></li>
	                <li class="pull-left header"><i class="fa fa-inbox"></i>${type}到达行业情况</li>
	                </ul>
	                <div id="processBarsMeiZhong" class="progress" style="height:20px;">
	                <c:forEach items="${listHangy}" var="li">
		                <div class="progress-bar" style="width: ${li.zb}%; background-color: ${li.color}" title="${li.hangy1}:${li.zb}%"> 
		                	<span >${li.hangy1}:${li.zb}%</span> 
		                </div>
	                </c:forEach>
	                    </div>
	                <div class="tab-content no-padding">
		                  <div class="chart tab-pane active" id="chart2" style="position: relative; height: 350px;">
					           <div class="box-body">
					             <div class="chart" style="float: left;width:100%">
				                     <div id="lineChart0" style="height:300px;"></div>
				                  </div>
					          </div>
		                  </div>
                	</div>
	            </div>
            </div><!-- /.col (RIGHT) -->
            
            <div class="col-md-6">
	            <div class="nav-tabs-custom">
	                <ul class="nav nav-tabs pull-right">
	                  <li class="pull-left header"><i class="fa fa-inbox"></i>${type}分市发运地区完成车数</li>
	                </ul>
	                <div class="tab-content no-padding">
		                  <div class="chart tab-pane active" id="chart3" style="position: relative; height: 350px;">
					           <div class="box-body">
					             <div class="chart" style="float: left;width:100%">
					               <div id="areaChart1" style="height:300px;"></div>
					             </div>
					          </div>
		                  </div>
                	</div>
	            </div>
            </div><!-- /.col (LEFT) -->
            <div class="col-md-6">
            	<div class="nav-tabs-custom">
	                <ul class="nav nav-tabs pull-right">
	                    <li class="pull-left header"><i class="fa fa-inbox"></i>${type}煤炭下水煤数量</li>
	                </ul>
	                <div class="tab-content no-padding">
		                  <div class="chart tab-pane active" id="chart4" style="position: relative; height: 350px;">
					           <div class="box-body">
					             <div class="chart" style="magin-top:10px;float: left;width:100%">
				                     <div id="lineChart1" style="height:300px;"></div>
				                  </div>
					          </div>
		                  </div>
                	</div>
	            </div>
            </div><!-- /.col (RIGHT) -->
            <div class="col-md-6">
	            <div class="nav-tabs-custom">
	                <ul class="nav nav-tabs pull-right">
	                  <li class="pull-left header"><i class="fa fa-inbox"></i>${type}煤炭到各路局完成车数</li>
	                </ul>
	                <div class="tab-content no-padding">
		                  <div class="chart tab-pane active" id="chart5" style="position: relative; height: 350px;">
					           <div class="box-body">
					             <div class="chart" style="magin-top:10px;float: left;width:100%">
					               <div id="lineChart2" style="height:300px;"></div>
					             </div>
					          </div>
		                  </div>
                	</div>
	            </div>
            </div><!-- /.col (LEFT) -->
            <div class="col-md-6">
            	<div class="nav-tabs-custom">
	                <ul class="nav nav-tabs pull-right">
	                    <li class="pull-left header"><i class="fa fa-inbox"></i>${type}煤炭交易量前五省</li>
	                </ul>
	                <div class="tab-content no-padding">
		                  <div class="chart tab-pane active" id="chart6" style="position: relative; height: 350px;">
					           <div class="box-body">
					             <div class="chart" style="float: left;width:100%">
				                     <div id="lineChart3" style="height:300px;"></div>
				                  </div>
					          </div>
		                  </div>
                	</div>
	            </div>
            </div><!-- /.col (RIGHT) -->
          </div><!-- /.row -->
          <div class="row">
            <div class="col-xs-12">
             <!-- interactive chart -->
              <div class="box box-primary">
                <div class="box-header with-border">
                  <i class="fa fa-bar-chart-o"></i>
                  <h3 class="box-title">${type}发运情况汇总明细表（最近12个月）</h3>
                  
                </div>
                <div class="box-body">
                  <div id="interactive" style="height: 300px;"></div>
                </div><!-- /.box-body-->
              </div><!-- /.box -->

            </div><!-- /.col (LEFT) -->
          </div><!-- /.row -->
        </div>
  </form>
  </div>
</div> 

 
</body>
</html>
